<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">
    <style>
        .text-justify{
            text-align: justify;
        }
    </style>
    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【JS-06】如何使用npm？cnpm又是什么？</h2>
            <h3>成都小课堂</h3>
            <p>分享人：童海琴</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section style="text-align: justify;">
            什么是npm<br>
            npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）, NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，它是 Node 获得成功的重要原因之一。常见的使用场景有以下几种：<br>
        </section>
        <section style="text-align: justify;">
            <p>允许用户从NPM服务器下载别人编写的第三方包到本地使用。<br>
            允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。<br>
            允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。<br>
            由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装<br>
            </p>
        </section>
        <section style="text-align: justify;">
            为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。<br>
            更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
        </section>

        <section style="text-align: justify;">
            什么是cnpm?<br>
            因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section style="text-align: justify;">
        <h3>npm常用指令<br></h3>
            1、npm install moduleNames：安装Node模块<br>
            安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块。<br>
            node的安装分为全局模式和本地模式。<br>
            一般情况下会以本地模式运行，包会被安装到和你的应用程序代码的本地node_modules目录下。<br>
        </section>
        <section style="text-align: justify;">
            在全局模式下，Node包会被安装到Node的安装目录下的node_modules下。<br>
            全局安装命令为$npm install -g moduleName。<br>
            获知使用$npm set global=true来设定安装模式，$npm get global可以查看当前使用的安装模式。<br>
            示例：<br>
            npm install express<br>
            默认会安装express的最新版本，也可以通过在后面加版本号的方式安装指定版本，如npm install express@3.0.6<br>
        </section>
        <section style="text-align: justify;">
        npm install name -g<br>
        将包安装到全局环境中<br>
        </section>
        <section style="text-align: justify;">
        npm install name --save<br>
        安装的同时，将信息写入package.json中项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到github时，就不用提交node_modules这个文件夹了。<br>
    </section>
        <section style="text-align: justify;">
            npm root：查看当前包的安装路径<br>
            npm root -g：查看全局的包的安装路径<br>
            npm -v：查看npm安装的版本<br>
            npm list --depth=0：查看所有高级的npm moudles<br>
            npm list --depth=0 -global：查看所有全局安装的模块<br>
        </section>
        <section style="text-align: justify;">
            <h3>为什么要保存至package.json？</h3>
            因为node插件包非常大，版本庞杂，所以不加入package信息，模块间的依赖变得非常困难，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。
            每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
        </section>
        <section style="text-align: justify;">
            <h3>Package.json 属性说明：<br></h3>
            name - 包名。（不要把node或者js放在名字中）<br>
            version - 包的版本号。<br>
            dependencies - 项目运行所依赖的模块<br>
            devDependencies - 项目开发所需要的模块<br>
            bin -  这需要在你的package.json中提供一个bin字段，它是一个命令名和本地文件名的映射。在安装时，如果是全局安装，npm将会使用符号链接把这些文件链接到prefix/bin，如果是本地安装，会链接到./node_modules/.bin/

        </section>
        <section style="text-align: justify;">
           使用npm卸载插件：npm uninstall < name > [-g] [--save-dev]  PS：不要直接删除本地插件包<br>
           使用npm更新插件：npm update < name > [-g] [--save-dev] <br>
           更新全部插件：npm update [--save-dev] <br>
           查看npm帮助：npm help <br>
           查看当前目录已安装插件：npm list <br>
           PS：npm安装插件过程：从<a href="http://registry.npmjs.org" target="_blank">http://registry.npmjs.org</a>下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法就是cnpm
        </section>
        <section style="text-align: justify;">
            <h3>cnpm介绍：<br></h3>
            官方网址：<a href="http://npm.taobao.org" target="_blank">http://npm.taobao.org</a><br>
            安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org<br>
            注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误 <br>
            PS：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
        </section>
        <section>
            <h3>3.常见问题</h3>
        </section>
        <section>
        bower 和 npm有什么区别
        </section>
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <p style="font-size: 30px;text-align:left">
                npm 是伴随 Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来，
                npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是
                Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。<br>
                bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和 bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由
                程序员自己解决）。<br>
                嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了，
                但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件
                都依赖同一个版本的jQuery。
            </p>
        </section>
        <section>
            <h3>5.编码实战</h3>
        </section>
        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <p>cnpm有哪些问题？</p>
        </section>
        <section>
            1.cnpm 的仓库只是 npm 仓库的一个拷贝，它不承担 publish 工作，所以你用 cnpm publish 命令会执行失败的<br>
            2.不仅是 publish 会执行失败，其它的需要注册用户(npm adduser)、或者修改 package 状态等命令都无法用 cnpm</section>
        <section>
            <h3>7.参考文献</h3>
            <p>参考一：<a href="http://www.ruanyifeng.com/blog/2016/01/npm-install.html" target="_blank">npm 模块安装机制简介</a></p>
            <p>参考二：<a href="https://zhuanlan.zhihu.com/codestory/20669077" target="_blank">开发者对 npm 公司不满，unpublish 了自己的所有模块</a></p>
            <p><a href="http://www.cnblogs.com/shmilysong/p/6133989.html">npm的一些常用命令</a></p>
            <p><a href="https://yq.aliyun.com/ziliao/40449">bower 和 npm 的区别详细介绍</a></p>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <section>
            <h4>感谢观看</h4>
            <p>BY王力 | 颜彦 | 童海琴</p>
        </section>
    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
http://www.ruanyifeng.com/blog/2012/06/internet_protocol_suite_part_ii.html
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
